<template>
  <div>

    <el-card class="box-card">

      <div slot="header" class="clearfix">
        <span>订单</span>
      </div>


      <el-form ref="form" :model="orderForm" label-width="80px">

        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号">
              <el-input v-model="orderForm.code" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户">
              <el-select v-model="orderForm.customerId" placeholder="请选择" :disabled="true">
                <el-option
                  v-for="item in customerList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人">
              <el-select v-model="orderForm.linkmanId" placeholder="请选择" value="" :disabled="true">
                <el-option
                  v-for="item in linkmanList"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话">
              <el-input v-model="orderForm.linkmanTel" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="税率" >
              <el-input v-model="orderForm.taxRate" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="编号"
          width="180">
          <template slot-scope="scope">
            <a :href="'http://localhost:8080/order-pic/preview/'+orderForm.code+'/'+scope.row.code" target="_blank">{{scope.row.code}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="零件名称" width="180">
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column
          prop="num"
          label="生产数量">
          <template slot-scope="scope">
            {{scope.row.num}}
          </template>
        </el-table-column>
      </el-table>

      <el-col :span="12">
        <el-form-item>
          <el-button type="primary" @click="addSave()">返回</el-button>
        </el-form-item>
      </el-col>

    </el-card>


  </div>
</template>

<script>
    export default {
        name: "OrdersDetail",
      data(){
        return{
          orderForm:{linkmanTel:null},
          tableData:[],
          auth:{token:null},
          customerList:[],
          linkmanList:[],
          dialogVisible:false
        }
      },
      methods:{
        //点击图片上传
        importPic:function(){
          this.dialogVisible=true;
        },
        //查询客户所有列表
        searchCustomer:function(){
          debugger;
          this.$http.get("/customer/getList").then((res)=>{
            this.customerList=res.data.result;
          });
        },
        uploadExcelSuccess:function () {

        },
        coedWork:function () {
          this.$http.get("/orders/getCode").then((res)=>{
            //  this.linkmanList=res.data.result;
            this.orderForm.code=res.data;
          });
        },
        addSave:function () {
          this.$router.push({ path: "/orderList" });
        },
        getById:function (id) {
          this.$http.get("/orders/getById/"+id).then((res)=>{
            this.orderForm=res.data.result;
          });
          this.$http.get("/gy/getById/"+id).then((res)=>{
            this.tableData=res.data.result;
            console.info(this.tableData);
          });
        },
      },
      mounted() {
        this.auth.token = sessionStorage.getItem("token");
        this.searchCustomer();
        this.coedWork();
        this.getById(this.$route.query.id);
      },
      watch:{
        'orderForm.customerId':function () {
          //alert(this.orderForm.customerId);
          debugger;
          this.$http.get("/customer/find/"+this.orderForm.customerId).then((res)=>{
            //  this.linkmanList=res.data.result;
            this.orderForm.taxRate=res.data.result.taxRate;
            this.linkmanList=[];
          });
          this.$http.get("/linkMan/getList/"+this.orderForm.customerId).then((res)=>{
            this.linkmanList=res.data.result;
            //this.orderForm.taxRate=res.data.result.taxRate;
          });

          },
          'orderForm.linkmanId':function (id) {
            debugger;
            this.$http.post("/linkMan/getMan/"+id).then((res)=>{
              // alert(res.data.result.tel);
              this.orderForm.linkmanTel=res.data.result.tel;
            });
          }
        }
    }
</script>

<style scoped>

</style>
